<!--
 * @FileDescription: 忘记密码模块
 * @Author: 汤子豪
 * @Date: 2021.6.26
 * @LastEditors: 汤子豪
 * @LastEditTime: 2021.6.26
 -->
 <template>
  <div>
    <el-steps :active="active" simple>
      <el-step title="填写工号" icon="el-icon-edit"></el-step>
      <el-step title="输入邮箱" icon="el-icon-edit"></el-step>
      <el-step title="邮箱验证" icon="el-icon-upload"></el-step>
      <el-step title="填写密码" icon="el-icon-picture"></el-step>
    </el-steps>
    <div id="part">
      <el-form
        label-width="100px"
        v-if="active === 1"
        :rules="rules"
        ref="gh"
        :model="gh"
      >
        <el-form-item label="工号:" prop="gh">
          <el-input
            v-model="gh.gh"
            autocomplete="off"
            placeholder="请输入工号"
          ></el-input>
        </el-form-item>
        <el-form-item label="验证码:" prop="verifycode">
          <el-row>
            <el-col :span="11">
              <el-input
                v-model="gh.verifycode"
                autocomplete="off"
                placeholder="请输入验证码"
              ></el-input>
            </el-col>
            <el-col :span="8" :offset="1">
              <div @click="refreshCode">
                <identify :identifyCode="identifyCode"></identify>
              </div>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <el-form
        label-width="100px"
        v-if="active === 2"
        :rules="rules"
        ref="email"
        :model="email"
      >
        <el-form-item label="邮箱:" prop="email">
          <el-input
            v-model="email.email"
            autocomplete="off"
            placeholder="请输入邮箱"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-form
        label-width="100px"
        v-if="active === 3"
        :rules="rules"
        ref="emailcode"
        :model="emailcode"
      >
        <el-form-item label="邮箱验证码:" prop="emailcode">
          <el-input
            v-model="emailcode.emailcode"
            autocomplete="off"
            placeholder="请输入邮箱验证码"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-form
        label-width="100px"
        v-if="active === 4"
        :rules="rules"
        ref="pass"
        :model="pass"
      >
        <el-form-item label="密码:" prop="password">
          <el-input
            type="password"
            v-model="pass.password"
            autocomplete="off"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码:" prop="checkPass">
          <el-input
            type="password"
            v-model="pass.checkPass"
            placeholder="请输入确认密码"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div id="next">
      <el-button type="success" @click="save" v-if="active === 4"
        >保存</el-button
      >
      <el-button type="primary" @click="nextStep" v-if="active !== 4"
        >下一步</el-button
      >
    </div>
  </div>
</template>
 <script>
import Identify from "../../components/Identify.vue";
export default {
  name: "initalize",
  data() {
    //工号验证
    var checkGh = (rule, value, callback) => {
      if (!value) {
        callback(new Error("工号不能为空"));
      } else {
        callback();
      }
    };
    //验证邮箱
    var checkEmail = (rule, value, callback) => {
      var regEmail =
        /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if (!value && !regEmail.test(value)) {
        callback(new Error("邮箱格式不正确"));
      } else {
        callback();
      }
    };
    //验证验证码
    var validateVerifycode = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入验证码"));
      } else if (value !== this.identifyCode) {
        console.log("validateVerifycode:", value);
        callback(new Error("验证码不正确!"));
      } else {
        callback();
      }
    };
    //验证邮箱验证码
    var checkEmailCode = (rule, value, callback) => {
      if (!value) {
        callback(new Error("邮箱验证码不能为空"));
      } else {
        callback();
      }
    };
    //验证密码
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.pass.checkPass !== "") {
          this.$refs.pass.validateField("checkPass");
        }
        callback();
      }
    };
    //验证确认密码
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.pass.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    return {
      gh: {
        gh: "",
        verifycode: "",
      },
      email: {
        email: "",
      },
      pass: {
        password: "",
        checkPass: "",
      },
      emailcode: {
        emailcode: "",
      },
      identifyCodes: "1234567890",
      identifyCode: "",
      active: 1,
      name: "gh",
      rules: {
        gh: [{ validator: checkGh, trigger: "blur" }],
        email: [{ validator: checkEmail, trigger: "blur" }],
        verifycode: [{ validator: validateVerifycode, trigger: "blur" }],
        emailcode: [{ validator: checkEmailCode, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
      },
    };
  },
  components: {
    Identify,
  },
	mounted() {
		this.refreshCode();
	},
  methods: {
    //随机数生成
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },

    // 切换验证码
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },

    // 生成四位随机验证码
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode +=
          this.identifyCodes[this.randomNum(0, this.identifyCodes.length)];
      }
      console.log(this.identifyCode);
    },
    //下一步
    nextStep() {
      this.$refs[this.name].validate((valid) => {
        if (valid) {
          if (this.active == 1) {
            this.name = "email";
          } else if (this.active == 2) {
            this.submitEmailAxios();
            this.name = "emailcode";
          } else if (this.active == 3) {
            this.submitEmailCodeAxios();
          }
          this.active += 1;
        }
      });
    },

    //保存校验
    save() {
      this.$refs["pass"].validate((valid) => {
        if (valid) {
          this.submitPasswordAxios();
        }
      });
    },

    //提交邮箱
    submitEmailAxios() {
      let _that = this;
      this.$api.login
        .sendEmail({email:this.email.email})
        .then(function (response) {
          console.log(response);
          _that.$message({
            showClose: true,
            message: "请查看邮箱验证码",
            type: "success",
          });
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    //提交邮箱验证码
    submitEmailCodeAxios() {
      let _that = this;
      this.$api.login
        .checkEmail({ code: this.emailcode.emailcode, email: this.email.email })
        .then(function (response) {
          console.log(response);
          if (response.data.code == 200) {
            _that.$message({
              showClose: true,
              message: "验证成功",
              type: "success",
            });
          } else {
            _that.$message({
              showClose: true,
              message: "验证码错误",
              type: "error",
            });
            _that.goBack(_that);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    //提交密码
    submitPasswordAxios() {
      let _that = this;
      this.$api.login
        .findPwd({
          email: this.email.email,
          gh: this.gh.gh,
          password: this.pass.password,
        })
        .then(function (response) {
          console.log(response);
          if (response.data.code == 200) {
            _that.$message({
              showClose: true,
              message: "修改成功",
              type: "success",
            });
          } else {
            _that.$message({
              showClose: true,
              message: "工号或邮箱错误",
              type: "error",
            });
            _that.goBack(_that);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    goBack(_that) {
      _that.active = 1;
      _that.name = "gh";
      _that.gh.verifycode = "";
      _that.gh.gh = "";
      _that.email.email = "";
      _that.pass.password = "";
      _that.pass.checkPass = "";
      _that.emailcode.emailcode = "";
    },
  },
};
</script>
 <style scoped>
#part {
  padding-top: 100px;
  margin: 0 auto;
  width: 500px;
}
#next {
  position: absolute;
  left: 50%;
  top: 70%;
  transform: translate(-50%, -50%);
}
</style>